<template>
  <div class="container">
    <div class="main">
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/homeview/help' }"
            >帮助与文档</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ navMax.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ nav.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-input class="search" v-model="input" placeholder="Please input" />
      </div>
      <div class="doc">
        <div class="doc_nav">
          <h3>文档导航</h3>
          <div>
            <el-menu
              :default-active="key"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :unique-opened="true"
              router
            >
              <el-sub-menu
                v-for="item in helplist"
                :key="item._id"
                :index="item._id"
              >
                <template #title>
                  <span>{{ item.document }}</span>
                </template>
                <el-menu-item
                  @click="checkKey(i)"
                  v-for="i in item.child"
                  :key="i._id"
                  :index="'/homeview/doc' + i.path"
                  >{{ i.document }}</el-menu-item
                >
              </el-sub-menu>
              <!-- <el-sub-menu index="2">
                <template #title>
                  <span>操作指南</span>
                </template>
                <el-menu-item index="2-1">登录注册</el-menu-item>
                <el-menu-item index="2-2">身份认证</el-menu-item>
                <el-menu-item index="2-3">存证中心</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <span>常见问题</span>
                </template>
                <el-menu-item index="3-1">常见问题</el-menu-item>
              </el-sub-menu> -->
            </el-menu>
          </div>
        </div>
        <div class="doc_con">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

onMounted(() => {
  getHelp();
});
let nav = ref({ name: "产品概述", path: "/homeview/doc/overview" });
let navMax = ref({ name: "产品简介" });
let helplist = ref([]);
let key = ref(window.sessionStorage.getItem("nav") || "/homeview/doc/overview");
const getHelp = async () => {
  let { data } = await axios.get("/api/mealprice/helps");
  helplist.value = data.data;
};
const checkKey = (i) => {
  nav.value.name = i.document;
  nav.value.path = i.path;
  window.sessionStorage.setItem("nav", "/homeview/doc" + i.path);
};
const handleOpen = (key, up) => {
  helplist.value.forEach((i) => {
    if (i._id == key) {
      navMax.value.name = i.document;
    }
  });
};
</script>
    
<style scoped lang='less'>
.container {
  //   width: 100%;
  .main {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    .header {
      height: 35px;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ebedf0;
      .el-breadcrumb {
        line-height: 35px;
      }
      .search {
        width: 200px;
      }
    }
    .doc {
      display: flex;
      .doc_nav {
        height: 100vh;
        width: 30%;
        h3 {
          text-align: left;
          padding: 15px;
          font-weight: 400;
          font-size: 16px;
          border-bottom: 1px solid #ebedf0;
        }
      }
      .doc_con {
        width: 70%;
      }
    }
  }
}
.el-breadcrumb,
.el-breadcrumb-item {
  cursor: pointer;
}
.el-menu {
  border-right: none !important;
}
</style>